<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <style>
    .container{
      width: 800px;
    }
    .container .item{
      background-color: rgba(0,0,0,.1);
      height: 40px;
      padding: 20px;
      display: flex;
      align-items: center;
      margin: 5px 0;
    }
    .container .item input[type=checkbox]{
      width: 15px;
      height: 15px;
    }
    .container .item a{
      margin-left: 10px;
      font-size: 20px;
    }
    .item{
      display: flex;
      justify-content: space-between;
    }
    .hide{
      display: none;
    }
  </style>
</head>
<body>

<div class="layui-container container">
  <div class="layui-card">
    <div class="layui-card-header"><h1>详情页</h1></div>
    <div class="layui-card-body cont">

      <div class="item">
        <div class="item1">
          <input type="checkbox" class="laytable-cell-checkbox">
          <a class="Ahref" href="javascript:void (0)">hahahahah</a>
        </div>

        <div class="hide">
            <input type="text" name="content" required  lay-verify="required" placeholder="请输入修改的内容" autocomplete="off" class="layui-input requ">
        </div>

        <div content="right">
          <button class="layui-btn btn"  lay-submit lay-filter="formDemo">修改</button>
          <button class="layui-btn layui-btn-danger delete">删除</button>
          <div class="layui-btn back">返回</div>
        </div>

      </div>
    </div>

  </div>
</div>


<script src="layui/layui.js"></script>
<script src="js/jquery.js"></script>
<script>

  // 获取id
  getUrlParam = function (name) {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    let r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
  }


  // 详情页 详情
  $.ajax({
    method:'GET',
    url:`https://api.yizhanketang.cn/api/v1/todos/${getUrlParam('id')}`,
    success(res){
      const {data} = res
      const {content} = data
      $('.Ahref').text(content)
    },
    error(e){
      console.log(e)
    }
  })


  $('.btn').on('click',function () {


    if ($(this).html() === '修改'){
      $(this).html('保存')
      $('.item1').hide()
      $('.hide').show()
    }else {
      $.ajax({
        method: 'POST',
        url: `https://api.yizhanketang.cn/api/v1/todos/${getUrlParam('id')}`,
        data: {
          content:$('.requ').val()
        },
        success(res) {
          const {data} = res
          // $('.Aval').html(`${data.content}`)

          layer.msg('修改成功');

          $('.back').on('click',function () {
            location.href = 'index.html'
          })

          $('.btn').html('修改')

          $('.item1').show()
          $('.hide').hide()

          $('.Ahref').text(data.content)
        },
        error(e) {
          layer.msg('缺少content');
        }
      })
    }
  })

  // delete
  $('.delete').on('click',function () {
    if (confirm('你确定删除吗?')){
      $.ajax({
        method: 'POST',
        url: `https://api.yizhanketang.cn/api/v1/todos/${getUrlParam('id')}/delete`,
        success() {
          // location.reload()
          location.href = 'index.html'
        }
      })
    }else {
      return false
    }
  })

</script>
</body>
</html>